<template>
    <div class="searchlist">
      <ul class="money">
        <li class="title">挂牌价格(万元)：</li>
        <li v-for="item of moneyList" :rel="item.rel" :class="{active:item.active}" @click="tabmoney(item);" :key="item.id">{{item.title}}</li>
      </ul>
      <ul class="region">
        <li class="title">地区：</li>
        <li v-for="item of regionList" :rel="item.rel" :class="{active:item.active}" @click="tabregion(item);" :key="item.id">{{item.title}}</li>
      </ul>
    </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      moneyList: [
        {title: '全部', rel: '', active: true},
        {title: '<500', rel: '0/500', active: false},
        {title: '500-1,000', rel: '500/1000', active: false},
        {title: '1,000-3,000', rel: '1000/3000', active: false},
        {title: '3,000-5,000', rel: '3000/5000', active: false},
        {title: '5,000-10,000', rel: '5000/10000', active: false},
        {title: '10,000-100,100', rel: '10000/100000', active: false},
        {title: '面议', rel: '0/0', active: false}
      ],
      regionList: [
        {title: '全部', rel: "", active: true},
        {title: '华北', rel: "('110000','120000','130000','140000','150000')", active: false},
        {title: '东北', rel: "('210000','220000','230000')", active: false},
        {title: '华东', rel: "('310000','320000','330000','340000','350000','360000','370000')", active: false},
        {title: '华中', rel: "('410000','420000','430000')", active: false},
        {title: '西南', rel: "('500000','510000','520000','530000','540000')", active: false},
        {title: '西北', rel: "('610000','620000','630000','640000','650000')", active: false},
        {title: '华南', rel: "('440000','450000','460000')", active: false},
        {title: '特区', rel: "('810000','820000','710000')", active: false}
      ],
      total: 0,
    }
  },
  created () {
    var this_ = this;
    this.bus.$on('navtotal', function(content) {
      this_.total = content.total

    })
  },
  methods: {
    tabmoney (data) {
      this.moneyList.forEach(function (obj) {
        obj.active = false
      })
      data.active = !data.active
      //
      this.AssetsType.tabmoney = data.rel
      this.bus.$emit('change')
    },
    tabregion (data) {
      this.regionList.forEach(function (obj) {
        obj.active = false
      })
      data.active = !data.active
      //
      this.AssetsType.tabregion = data.rel
      this.bus.$emit('change')
    }
  }
}
</script>

<style scoped type="text/stylus" lang="stylus">
.searchlist
  width:1200px;margin:0 auto;
  ul
    height:40px;border-bottom:1px dashed #BA9959
    li
      float:left;height:20px;line-height:20px;text-align :center;border-radius:5px; color: #888888;margin-right:30px;margin-top:10px;padding:0px 7px;cursor :pointer
    .title
      font-size:16px;font-weight:500;color:#888
    .active
      color:#fff; background :#dcb467
</style>
